<template>
	<view class="page-wraper">
		<scroll-view scroll-y="true" :style="'height:' + scroll_height+';'" :scroll-top="scrollTop" refresher-enabled
			:refresher-triggered="triggered" @refresherrefresh="onRefresh" @scrolltolower="lower">
			<view class="contentViewBox">
				<cssArcBackground bgColor="#4E6ECC" height="160" />
				<view class="swiperImageViewClass">

					<view class="view-box">
						<view class="view-item" @click="viewItemClick(0)">
							<image src="@/static/fabucheliang.png"
								style="height: 40.14rpx;width: 50.12rpx; margin-top: 20rpx;" />
							<text class="view-item-text">发布寻车</text>
						</view>
						<view class="view-item" @click="viewItemClick(1)">
							<image src="@/static/car.png"
								style="height: 45.68rpx;width: 50.98rpx; margin-top: 14rpx;" />
							<text class="view-item-text">我的寻车</text>
						</view>
						<view class="view-item" @click="viewItemClick(2)">
							<image src="@/static/fanlibaojia.png"
								style="height: 43.28rpx;width: 48.64rpx; margin-top: 16rpx;" />
							<text class="view-item-text">我的报价</text>
						</view>
					</view>
					<view class="view-box">
						<view :class="selected==3?'view-item-selected':'view-item-NoSelect'" @click="viewItemClick(3)">
							<text
								:class="selected==3?'view-item-text-selected':'view-item-text-NoSelect'">{{seriesName}}</text>
							<image class="view-item-image-small" src="@/static/downArrow-selected.png"
								v-if="selected==3" />
							<image class="view-item-image-small" src="@/static/DownArrow.png" v-else />
						</view>
						<view :class="selected==4?'view-item-selected':'view-item-NoSelect'" @click="viewItemClick(4)">
							<text
								:class="selected==4?'view-item-text-selected':'view-item-text-NoSelect'">{{typesName}}</text>
							<image class="view-item-image-small" src="@/static/downArrow-selected.png"
								v-if="selected==4" />
							<image class="view-item-image-small" src="@/static/DownArrow.png" v-else />
						</view>
						<view :class="selected==5?'view-item-selected':'view-item-NoSelect'" @click="viewItemClick(5)">
							<text
								:class="selected==5?'view-item-text-selected':'view-item-text-NoSelect'">{{locationName}}</text>
							<image class="view-item-image-small" src="@/static/downArrow-selected.png"
								v-if="selected==5" />
							<image class="view-item-image-small" src="@/static/DownArrow.png" v-else />
						</view>
					</view>
					<view v-if="isNoData" class="NO-DATA-view-box-class">
						<image class="NO-DATA-image-view-class" src="@/static/NoDataBac.png"></image>
						<view class="NO-DATA-text-chushou-class">暂无数据</view>
					</view>
					<view class="search-list-class-data-view-list" v-if="isShowList">
						<uniList :data="listData" @change='change'></uniList>
						<view v-if="isShowMore" class="no-more-text-bottom-class">没有更多了</view>
						<view v-else class="no-more-text-bottom-class"></view>
					</view>
					<!-- <view class="height60"></view> -->
					
				</view>


			</view>
		</scroll-view>
		<uni-popup ref="bottom_popup_types" :animation="true" type="bottom" @maskClick="maskClickpopup()"
			@change="changePopup()">
			<view class="types-view-box-class">
				<view class="all-types-class">全部类型</view>
				<view v-for="(item,index) in typesDatas" :key="index" @click="types_click(item,index)">
					<view class="item-view-box-search-type">
						<view :class="index==types_select?'types-name-class-select':'types-name-class'">{{item.name}}
						</view>
						<view :class="index==types_select?'types-name-class-select':'types-number-class'">{{item.num}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="bottom_popup_location" :animation="true" type="bottom" @maskClick="maskClickpopup()"
			@change="changePopup()">
			<scroll-view :scroll-y="true" class="scroll-view-class">
				<view class="types-view-box-class">
					<view class="all-types-class">全部地区</view>
					<view v-for="(item1,index1) in locationDatas" :key="index1">
						<view class="item-view-box-search-type" @click="location_click(item1,index1)">
							<view :class="index1==location_select?'types-name-class-select':'types-name-class'">
								{{item1.name}}
							</view>
							<view :class="index1==location_select?'types-name-class-select':'types-number-class'">
								{{item1.num}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

		</uni-popup>
	</view>
</template>

<script>
	import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
	import addressSearch from "@/components/addressSearch/addressSearch.vue";
	import uniList from "@/components/uniList/uniList.vue";
	import {
		getPersonInfo
	} from "@/api/user.js"

	import {
		getCarSearchReleaseList,
		usedCarSearchCarSourceType,
		usedCarSearchProvince
	} from "@/api/secondhandCar.js"
	export default {
		components: {
			addressSearch,
			cssArcBackground,
			uniList
		},
		props: {
			brandName: {
				type: String,
				default: ''
			},
			series_id: {
				type: String,
				default: ''
			},
			series_name: {
				type: String,
				default: '全部车型'
			},
			// sreach: {
			// 	type: String,
			// 	default: ''
			// },
			scrollTop: {
				type: Number,
				default: 0
			},
			scroll_height: {
				type: String,
				default: '100vh'
			},
			isLogin: {
				type: Boolean,
				default: true
			}
		},
		beforeCreate() {

		},
		beforeMount() {
			this.getsearchCarListData()
			this.seriesName = this.series_name
		},
		mounted() {
			var that = this
			//获取寻车列表
			getCarSearchReleaseList(15, this.series_id, '', '', this.sreach, 1).then(res => {
				that.$utils.log(JSON.stringify(res))
				if (res.code == 0) {
					that.$nextTick(() => {
						that.listData = res.data.data
						that.last_page = res.data.last_page
						if (that.last_page == that.page) {
							that.$utils.log("11111111       " + JSON.stringify(that.page))
							that.isShowMore = true
							setTimeout(() => {
								that.isShowMore = false
							}, 2000)
						} else {
							that.isShowMore = false
							that.$utils.log("22222      " + JSON.stringify(that.page))
						}
						if (res.data.total>0) {
							that.isNoData = false
							that.isShowList = true
						} else {
							that.isShowList = false
							that.isNoData = true
						}
						that.$forceUpdate()
					})
				}
			})
		},
		data() {
			return {
				temp: 0,
				selected: 0,
				listData: [],
				source_type_id: '',
				registration_province: '',
				typesDatas: [],
				locationDatas: [],
				types_select: '0',
				location_select: '0',

				page: 1, //第几页数据
				page_num: 15,
				last_page: 0, //总页数
				isShowMore: false,
				isEnd: false,
				triggered: false,
				isfreshing: false,
				isShowList: false,
				isNoData: false,
				seriesName: '全部车型',
				typesName: '全部类型',
				locationName: '全部地区',
				sreach:''
			}
		},
		onShow() {

		},
		methods: {
			searchCarCS(city,sreach){
				this.sreach = sreach
				this.getsearchCarListData()
			},
			//选择类型
			types_click(item, index) {
				this.$utils.log('打印选择类型返回的数据  ' + JSON.stringify(item))
				this.seriesName = '全部车型'
				this.locationName = '全部地区'
				this.location_select = '0'
				this.types_select = index + ''
				this.series_id = ''
				this.registration_province = ''
				// this.sreach = ''
				if (index == 0) {
					this.source_type_id = ''
				} else {
					this.source_type_id = item.id
				}
				this.typesName = item.name

				this.getsearchCarListData()
				this.selected = 0
				this.$refs.bottom_popup_types.close()
			},
			//选择地区
			location_click(item, index) {
				this.$utils.log('打印选择类型返回的数据  ' + JSON.stringify(item))
				this.seriesName = '全部车型'
				this.typesName = '全部类型'
				this.locationName = item.name
				this.types_select = '0'
				this.location_select = index + ''
				this.series_id = ''
				this.source_type_id = ''
				// this.sreach = ''
				if (index == 0) {
					this.registration_province = ''
				} else {
					this.registration_province = item.name
				}
				this.getsearchCarListData()
				this.selected = 0
				this.$refs.bottom_popup_location.close()
			},
			//获取寻车列表
			getsearchCarListData() {
				var that = this
				getCarSearchReleaseList(this.page_num, this.series_id, this.source_type_id, this.registration_province,
					this.sreach, this.page).then(res => {
					that.$nextTick(() => {
						if (that.page == 1) {
							that.listData = []
							that.listData = res.data.data
							that.triggered = false
							that.isfreshing = false
						} else {
							for (var i = 0; i < res.data.data.length; i++) {
								that.$utils.log(JSON.stringify(res.data.data.length))
								that.listData.push(res.data.data[i]); // 加载的数据追加在上一页后面
							}
							that.isEnd = false
						}
						that.last_page = res.data.last_page

						if (that.last_page == that.page) {
							that.isShowMore = true
							setTimeout(() => {
								that.isShowMore = false
							}, 2000)
						} else {
							that.isShowMore = false
						}
						if (res.data.total>0) {
							that.isNoData = false
							that.isShowList = true
						} else {
							that.isShowList = false
							that.isNoData = true
						}
						setTimeout(() => {
							that.$forceUpdate()
						}, 700)

					})
				})
			},
			maskClickpopup() {
				this.selected = 0
			},
			changePopup() {},
			change(item) {
				this.$utils.log(JSON.stringify(item))
				uni.navigateTo({
					url: '/secondhandCar/serachCarDetails/serachCarDetails?id=' + item.id
				})
			},
			getPageusedCarSearchCarSourceType() {
				var that = this
				usedCarSearchCarSourceType().then(res => {
					if (res.code == 0) {
						that.$nextTick(() => {
							that.typesDatas = res.data
							that.$utils.log("打印寻车列表数据 车源类型 " + JSON.stringify(that.typesDatas))
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			getPageusedCarSearchProvince() {
				var that = this
				usedCarSearchProvince().then(res => {
					if (res.code == 0) {
						that.$nextTick(() => {
							that.locationDatas = res.data
							that.$utils.log("打印寻车列表数据 省份 " + JSON.stringify(that.locationDatas))
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},

			onRefresh() {
				if (!this.triggered) {
					if (this.isfreshing) return;
					this.isfreshing = true;
					if (!this.triggered) {
						this.triggered = true;
					}
					this.page = 1
					this.$utils.log("触发下拉刷新  第1个  111111 refresherrefreshFun")
					this.getsearchCarListData()
				}
			},

			lower() {
				this.$utils.log("打印 上拉加载    触底了    ")
				if (!this.isShowMore) {
					if (!this.isEnd) {
						if (this.page < this.last_page) {
							this.page = this.page + 1
							this.getsearchCarListData()
						} else {
							uni.showToast({
								title: '没有数据了',
								icon: 'none'
							})
							this.$utils.log("没有数据了")
						}

					}
				}
				if (this.isShowMore) {
					var that = this
					that.isShowMore = true;
					setTimeout(() => {
						that.$nextTick(() => {
							that.isShowMore = false;
						})
					}, 2500);
				}
			},

			viewItemClick(inta) {
				const value = uni.getStorageSync('login')
				if (!value) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let userid = value.id

				getPersonInfo(userid)
					.then(res => {
						let data = res.data
						let personAuth = false
						if (data.length == 0) {

						} else {
							let examine = data.examine
							if (examine == 1) {
								personAuth = true
							} else {
								personAuth = false
							}
						}

						if (personAuth) {
							this.$utils.log(inta)
							switch (inta + "") {
								case "0": {
									if (this.isLogin) {
										uni.navigateTo({
											url: '/secondhandCar/sendSearchCar/sendSearchCar'
										})
									} else {
										uni.navigateTo({
											url: '/pages/login/login'
										})
									}
									break;
								}
								case "1": {
									if (this.isLogin) {
										uni.navigateTo({
											url: '/pages/home/secondhandCar/meSearchCar/meSearchCarList/meSearchCarList'
										})
									} else {
										uni.navigateTo({
											url: '/pages/login/login'
										})
									}
									break;
								}
								case "2": { // 我的报价
									if (this.isLogin) {
										uni.navigateTo({
											url: '/pages/home/offer/myOfferList',
										})
									} else {
										uni.navigateTo({
											url: '/pages/login/login'
										})
									}
									break;
								}
								case "3": {
									this.selected = 3
									if (this.seriesName == '全部车型') {
										uni.navigateTo({
											url: '/pages/home/allBrand/allBrand?search_page_type=true'
										})
									} else {
										this.series_id = ''
										this.seriesName = '全部车型'
										this.$emit('changeSeries', this.series_id,this.seriesName)
										this.getsearchCarListData()
										this.selected = 0
									}
									break;
								}
								case "4": {
									this.selected = 4
									if (this.typesName == '全部类型') {
										this.getPageusedCarSearchCarSourceType()
										this.$refs.bottom_popup_types.open()
									} else {
										this.source_type_id = ''
										this.getsearchCarListData()
										this.selected = 0
										this.typesName = '全部类型'
									}

									break;
								}
								case "5": {
									this.selected = 5
									if (this.locationName == '全部地区') {
										this.getPageusedCarSearchProvince()
										this.$refs.bottom_popup_location.open()
									} else {
										this.locationName = '全部地区'
										this.registration_province = ''
										this.getsearchCarListData()
										this.selected = 0
									}
									break;
								}
							}

						} else {

							uni.showModal({
								title: '提示',
								content: '需要先通过认证才能报价',
								confirmText: '去认证',
								confirmColor: "#0E59EA",
								cancelText: '我知道了',
								cancelColor: "#333333",
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/user/auth/auth'
										})
									}
								}
							})
						}
					})






			},
		}
	}
</script>

<style>
	page {
		background: linear-gradient(to bottom, #F0F0F0, #F0F0F0);
	}

	.page-wraper {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;

	}

	.contentViewBox {
		width: 100%;
		height: auto;
		/* 父元素设置相对定位 */
		position: relative;
	}

	.swiperImageViewClass {
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘 50px */
		top: 0rpx;
		z-index: 1;
		text-align: center;
		margin-top: 5rpx;
		width: 100%;

	}

	.view-box {
		display: flex;
		margin: 0rpx 16rpx;
		margin-top: 20rpx;
	}

	.view-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #5876CD;
		border-radius: 20rpx;
		margin: 0rpx 12rpx;
	}

	.view-item-selected {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
		margin-right: 20rpx;
		background-color: white;
		border-radius: 50rpx;
	}

	.view-item-NoSelect {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.view-item-image {
		width: 45rpx;
		height: 40rpx;
		opacity: 1;
	}

	.view-item-image-small {
		width: 20rpx;
		height: 12rpx;
	}

	.view-item-text {
		margin: 20rpx;
		color: white;
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		color: #FFFFFF;
		opacity: 1;
	}

	.view-item-text-selected {
		color: #4E6ECC;
		font-size: 28rpx;
		margin: 5rpx;
	}

	.view-item-text-NoSelect {
		margin: 8rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 1;
	}

	.search-list-class-data-view-list {
		margin: 20rpx 28rpx;
		background-color: #FF000000;
	}

	.types-view-box-class {
		height: auto;
		background-color: #FFFFFF;
		opacity: 1;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding: 30rpx 28rpx 56rpx 36rpx;
	}

	.all-types-class {
		text-align: center;
		font-size: 32rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #1C2125;
		opacity: 1;
		margin-bottom: 14rpx;
	}

	.item-view-box-search-type {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 14rpx 0rpx;
	}

	.types-name-class {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1C2125;
		opacity: 1;
	}

	.types-name-class-select {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #0E59EA;
		opacity: 1;
	}

	.types-number-class {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		opacity: 1;
	}

	.scroll-view-class {
		height: 700rpx;
		background-color: #FFFFFF;
		opacity: 1;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		/* padding: 18rpx 28rpx 60rpx 36rpx; */
	}

	.no-more-text-bottom-class {
		height: 180rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
		margin-top: 46rpx;
	}

	.height60 {
		height: 60rpx;
		width: 100%;
	}

	.NO-DATA-view-box-class {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.NO-DATA-image-view-class {
		width: 380rpx;
		height: 380rpx;
		margin: auto;
		margin-top: 208rpx;
	}

	.NO-DATA-text-chushou-class {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1C2125;
		opacity: 1;
	}
</style>